<template>
  <view class="page">
    <view class="flex align-center justify-between padding">
      <u-icon name="arrow-left" size="32rpx" color="#999" @click="handlePrevDay"></u-icon>
      <u-text align="center" :text="date" size="32rpx" color="#333333"></u-text>
      <u-icon name="arrow-right" size="32rpx" color="#999" @click="handleNextDay"></u-icon>
    </view>
    <view class="main">
      <!-- 日报数据 -->
      <view class="card">
        <view class="title">
          <image src="/static/image/teacher/icon-report.png" mode="aspectFit" style="width: 34rpx; height: 34rpx;">
          </image>
          <u-text bold text="日报数据" size="32rpx" color="#333333"></u-text>
        </view>
        <view class="padding-tb">
          <up-grid col="4" :border="false" @click="click">
            <up-grid-item>
              <u-text align="center" size="40rpx" bold text="100"></u-text>
              <u-text align="center" size="28rpx" color="#999" text="上传作业"></u-text>
            </up-grid-item>
            <up-grid-item>
              <u-text align="center" size="40rpx" bold text="20"></u-text>
              <u-text align="center" size="28rpx" color="#999" text="上传错题"></u-text>
            </up-grid-item>
            <up-grid-item>
              <u-text align="center" size="40rpx" bold text="100"></u-text>
              <u-text align="center" size="28rpx" color="#999" text="生成日报"></u-text>
            </up-grid-item>
            <up-grid-item>
              <u-text align="center" size="40rpx" bold text="100"></u-text>
              <u-text align="center" size="28rpx" color="#999" text="延迟时间"></u-text>
            </up-grid-item>
          </up-grid>
        </view>
      </view>

      <!-- 周报数据 -->
      <view class="card margin-top-sm padding-top">
        <view class="title margin-bottom">
          <image src="/static/image/teacher/icon-report.png" mode="aspectFit" style="width: 34rpx; height: 34rpx;">
          </image>
          <u-text bold text="周报数据" size="32rpx" color="#333333"></u-text>
        </view>
        <CollapseBox title="知识点讲解比例" value="18/20" v-for="item in 1" :key="item">
          <view class="flex align-center justify-between gap-sm margin-left margin-top-sm" v-for="i in 2" :key="i">
            <view class="flex-1">
              <u-text text="周末班：一年级数学（A）班" bold size="30rpx" color="#333333"></u-text>
            </view>
            <view>
              <u-text align="right" text="18/20" size="28rpx"></u-text>
            </view>
          </view>
        </CollapseBox>
        <u-divider></u-divider>
        <CollapseBox title="练习题答案回传比例" value="18/20" v-for="item in 1" :key="item">
          <view class="flex align-center justify-between gap-sm margin-left margin-top-sm" v-for="i in 2" :key="i">
            <view class="flex-1">
              <u-text text="周末班：一年级数学（A）班" bold size="30rpx" color="#333333"></u-text>
            </view>
            <view>
              <u-text align="right" text="18/20" size="28rpx"></u-text>
            </view>
          </view>
        </CollapseBox>
        <u-divider></u-divider>
        <CollapseBox title="周报完成数量" value="18/20" v-for="item in 1" :key="item">
          <view class="flex align-center justify-between gap-sm margin-left margin-top-sm" v-for="i in 2" :key="i">
            <view class="flex-1">
              <u-text text="周末班：一年级数学（A）班" bold size="30rpx" color="#333333"></u-text>
            </view>
            <view>
              <u-text align="right" text="18/20" size="28rpx"></u-text>
            </view>
          </view>
        </CollapseBox>
        <u-divider></u-divider>
        <CollapseBox title="平均延迟完成时间" value="18/20" v-for="item in 1" :key="item">
          <view class="flex align-center justify-between gap-sm margin-left margin-top-sm" v-for="i in 2" :key="i">
            <view class="flex-1">
              <u-text text="周末班：一年级数学（A）班" bold size="30rpx" color="#333333"></u-text>
            </view>
            <view>
              <u-text align="right" text="18/20" size="28rpx"></u-text>
            </view>
          </view>
        </CollapseBox>
      </view>

      <!-- 知识点确认 -->
      <view class="card margin-top-sm padding-top">
        <view class="title margin-bottom">
          <image src="/static/image/teacher/icon-index-knowledge-points.png" mode="aspectFit"
            style="width: 34rpx; height: 34rpx;">
          </image>
          <u-text bold text="知识点确认" size="32rpx" color="#333333"></u-text>
        </view>
        <CollapseBox title="知识点确认数量" value="18/20" v-for="item in 1" :key="item">
          <view class="flex align-center justify-between gap-sm margin-left margin-top-sm" v-for="i in 2" :key="i">
            <view class="flex-1">
              <u-text text="周末班：一年级数学（A）班" bold size="30rpx" color="#333333"></u-text>
            </view>
            <view>
              <u-text align="right" text="18/20" size="28rpx"></u-text>
            </view>
          </view>
        </CollapseBox>
        <CollapseBox title="平均延迟完成时间" value="18/20" v-for="item in 1" :key="item">
          <view class="flex align-center justify-between gap-sm margin-left margin-top-sm" v-for="i in 2" :key="i">
            <view class="flex-1">
              <u-text text="周末班：一年级数学（A）班" bold size="30rpx" color="#333333"></u-text>
            </view>
            <view>
              <u-text align="right" text="18/20" size="28rpx"></u-text>
            </view>
          </view>
        </CollapseBox>
      </view>

      <!-- 练习题生成 -->
      <view class="card margin-top-sm padding-top">
        <view class="title margin-bottom">
          <image src="/static/image/teacher/icon-exercise.png" mode="aspectFit" style="width: 34rpx; height: 34rpx;">
          </image>
          <u-text bold text="练习题生成" size="32rpx" color="#333333"></u-text>
        </view>
        <CollapseBox title="错题知识点数量" value="18/20" v-for="item in 1" :key="item">
          <view class="flex align-center justify-between gap-sm margin-left margin-top-sm" v-for="i in 2" :key="i">
            <view class="flex-1">
              <u-text text="周末班：一年级数学（A）班" bold size="30rpx" color="#333333"></u-text>
            </view>
            <view>
              <u-text align="right" text="18/20" size="28rpx"></u-text>
            </view>
          </view>
        </CollapseBox>
        <u-divider></u-divider>
        <CollapseBox title="生成练习题数量" value="18/20" v-for="item in 1" :key="item">
          <view class="flex align-center justify-between gap-sm margin-left margin-top-sm" v-for="i in 2" :key="i">
            <view class="flex-1">
              <u-text text="周末班：一年级数学（A）班" bold size="30rpx" color="#333333"></u-text>
            </view>
            <view>
              <u-text align="right" text="18/20" size="28rpx"></u-text>
            </view>
          </view>
        </CollapseBox>
        <u-divider></u-divider>
        <CollapseBox title="平均延迟完成时间" value="18/20" v-for="item in 1" :key="item">
          <view class="flex align-center justify-between gap-sm margin-left margin-top-sm" v-for="i in 2" :key="i">
            <view class="flex-1">
              <u-text text="周末班：一年级数学（A）班" bold size="30rpx" color="#333333"></u-text>
            </view>
            <view>
              <u-text align="right" text="18/20" size="28rpx"></u-text>
            </view>
          </view>
        </CollapseBox>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref } from 'vue';
import dayjs from 'dayjs';
import CollapseBox from '@/components/CollapseBox/index.vue';
const date = ref(dayjs().format('YYYY-MM-DD'));
const handlePrevDay = () => {
  date.value = dayjs(date.value).subtract(1, 'day').format('YYYY-MM-DD');
};
const handleNextDay = () => {
  if (date.value === dayjs().format('YYYY-MM-DD')) {
    uni.showToast({
      title: '今天已经是最后一天了',
      icon: 'none',
    });
    return;
  }
  date.value = dayjs(date.value).add(1, 'day').format('YYYY-MM-DD');
};
const handleClick = (item) => {
  console.log(item);
  expandCardId.value = item.id
};
</script>
<style scoped lang="scss">
.card {
  background: white;
  border-radius: 20rpx;
  box-sizing: border-box;

  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 32rpx;
    color: #333;
    gap: 10rpx;
  }
}
</style>